﻿$(window).load(function () {
    $(".loading").fadeOut()
})
$(function () {
    echarts_1();
    echarts_2();
    echarts_3();
    echarts_4();
    echarts_5();
    zb1();
    zb2();
    zb3();
    zb4();
    })

    function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                right: 10,
                top: 30,
                height: 140,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 12
                },
                orient: 'vertical',
                data: ['图例1', '图例2', '图例3', '图例4']
            },
            calculable: true,
            series: [
                {
                    name: ' ',
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
                    type: 'pie',
                    radius: [30, 70],
                    center: ['35%', '50%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    lableLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    data: [
                        {value: 10, name: '图例1'},
                        {value: 15, name: '图例2'},
                        {value: 25, name: '图例3'},
                        {value: 30, name: '图例4'}
                    ]
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                right: 10,
                top: 30,
                height: 140,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 12
                },
                orient: 'vertical',
                data: ['图例1', '图例2', '图例3', '图例4']
            },
            calculable: true,
            series: [
                {
                    name: ' ',
                    color: ['#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262'],
                    type: 'pie',
                    radius: [30, 70],
                    center: ['35%', '50%'],
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    lableLine: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },

                    data: [
                        {value: 50, name: '图例1'},
                        {value: 45, name: '图例2'},
                        {value: 35, name: '图例3'},
                        {value: 30, name: '图例4'}
                    ]
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_3() {
        /*   */
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'))
        $.ajax({
            url: '/bi/data',
            type: 'POST',
            dataType: 'json',
            success: function (result) {
                option = {
                    legend: {
                        data: ['2017年', '2018年'],
                        align: 'right',
                        right: '20%',
                        top: '10%',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#dddc6b'
                            }
                        }
                    },
                    grid: {
                        left: '10',
                        top: '20',
                        right: '30',
                        bottom: '10',
                        containLabel: true
                    },

                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 16,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }

                        },

                        // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        data: result.axis

                    }, {

                        axisPointer: {show: false},
                        axisLine: {show: false},
                        position: 'bottom',
                        offset: 20,


                    }],

                    yAxis: [{
                        type: 'value',
                        axisTick: {show: false},
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 16,
                            },
                        },

                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,.1)'
                            }
                        }
                    }],
                    series: [
                        {
                            name: '结算率',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 5,
                            showSymbol: false,
                            lineStyle: {

                                normal: {
                                    // color: '#dddc6b',
                                    color: 'red',
                                    width: 4
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(221, 220, 107, 0.4)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(221, 220, 107, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'blue',
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            // data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
                            data: result.axis2

                        },
                        {
                            name: '结算率2',
                            type: 'bar',
                            lineStyle: {

                                normal: {
                                    color: '#dddc6b',
                                    width: 4
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(221, 220, 107, 0.4)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(221, 220, 107, 0.1)'
                                    }], false),
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#dddc6b',
                                    borderColor: 'rgba(221, 220, 107, .1)',
                                    borderWidth: 12
                                }
                            },
                            // data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
                            data: result.axis2

                        }

                    ]

                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });

            },
            error: function (data) {
            alert('未成功')
        }
    })


    }

    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2017年', '2018年'],
                align: 'right',
                right: '40%',
                top: '0%',
                textStyle: {
                    color: "#fff",
                    fontSize: '16',

                },
                itemWidth: 16,
                itemHeight: 16,
                itemGap: 35
            },
            grid: {
                left: '0%',
                top: '40px',
                right: '0%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '16',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '16',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                name: '2017年',
                type: 'bar',
                data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
                barWidth: '15', //柱子宽度
                // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: '#2f89cf',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }, {
                name: '2018年',
                type: 'bar',
                data: [1, 4, 5, 11, 12, 9, 5, 6, 5, 6, 3, 9],
                barWidth: '15',
                // barGap: 1,
                itemStyle: {
                    normal: {
                        color: '#62c98d',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            },
            ]
        };

        /*   */
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        option = {
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2017年', '2018年'],
                align: 'right',
                right: '40%',
                top: '0%',
                textStyle: {
                    color: "#fff",
                    fontSize: '16',

                },

                itemGap: 35
            },
            grid: {
                left: '0%',
                top: '40px',
                right: '0%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '16',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '16',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                name: '2017年',
                type: 'line',

                data: [2, 6, 3, 8, 5, 8, 10, 13, 8, 5, 6, 9],

                itemStyle: {
                    normal: {
                        color: '#2f89cf',
                        opacity: 1,

                        barBorderRadius: 5,
                    }
                }
            }, {
                name: '2018年',
                type: 'line',
                data: [5, 2, 6, 4, 5, 12, 5, 17, 9, 2, 6, 3],
                barWidth: '15',
                // barGap: 1,
                itemStyle: {
                    normal: {
                        color: '#62c98d',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            },
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function zb1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb1'));
        var v1 = 60//结算数
        var v2 = 40//未结算数
        var v3 = v1 + v2//总订单数
        option = {
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#49bcf7',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '数量结算率',
                    label: {
                        normal: {
                            formatter: Math.round(v1 / v3 * 100) + '%',
                            textStyle: {
                                fontSize: 30,
                                color: '#fff',
                            }
                        }
                    }
                },
                    {
                        value: v2,
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return '数量结算率'
                                },
                                textStyle: {
                                    color: '#aaa',
                                    fontSize: 16
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,255,255,.2)'
                            },
                            emphasis: {
                                color: '#fff'
                            }
                        },
                    }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function zb2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb2'));
        var v1 = 80//结算数
        var v2 = 20//未结算数
        var v3 = v1 + v2//总订单数
        option = {

//animation: false,
            series: [{
                type: 'pie',
                radius: ['60%', '70%'],
                color: '#49bcf7',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '数量结算率',
                    label: {
                        normal: {
                            formatter: Math.round(v1 / v3 * 100) + '%',
                            textStyle: {
                                fontSize: 24,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '数量结算率'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 16
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function zb3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb3'));
        var v1 = 30//结算金额
        var v2 = 70//未结算
        var v3 = v1 + v2
        option = {
            series: [{

                type: 'pie',
                radius: ['60%', '70%'],
                color: '#62c98d',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '金额结算率',
                    label: {
                        normal: {
                            formatter: Math.round(v1 / v3 * 100) + '%',
                            textStyle: {
                                fontSize: 24,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '金额结算率'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 16
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function zb4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zb4'));
        var v1 = 90//结算金额
        var v2 = 10//未结算
        var v3 = v1 + v2
        option = {
            series: [{

                type: 'pie',
                radius: ['60%', '70%'],
                color: '#29d08a',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '金额结算率',
                    label: {
                        normal: {
                            formatter: Math.round(v1 / v3 * 100) + '%',
                            textStyle: {
                                fontSize: 24,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '金额结算率'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 16
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }




		
		
		


		









